<template>
  <view class="bill-detail page-box">
    <view v-if="currentOrderId">
      <u-cell-group :border="false">
        <u-cell title="服务类型" :value="projectData.title"></u-cell>
        <u-cell title="客户名称" :value="clientInfo.realName"></u-cell>
        <u-cell title="客户联系方式" :value="clientInfo.mobilePhone"></u-cell>
        <u-cell
          title="客户地址"
          :value="normalAddress.address + normalAddress.addressDetail"
        ></u-cell>
        <u-cell
          title="客户预约时间"
          :value="$u.timeFormat(orderData.creatorTime, 'yyyy年mm月dd日 hh:MM')"
        >
        </u-cell>
        <u-cell title="客户下单金额">
          <template slot="value">
            <text style="color: #f60000">
              ¥ {{ Number(projectData.price) + orderData.distance * 10 }}
            </text>
          </template>
        </u-cell>
        <u-cell
          title="服务时长"
          :value="projectData.project_time + '分钟'"
        ></u-cell>
      </u-cell-group>
    </view>

    <u-empty
      v-else
      mode="data"
      icon="http://cdn.uviewui.com/uview/empty/data.png"
    >
    </u-empty>
  </view>
</template>
<script>
import { getModelInfo, getModelList } from "@/api";
import { getSearchFilter } from "@/common/function";
import infoMixin from "@/common/mixins/info";
export default {
  mixins: [infoMixin],
  data() {
    return {
      title: "账单详情",
      isReady: false,
      loading: false,
      disabled: false,
      orderData: {},
      clientInfo: {}, //客户信息
      currentOrderId: "",
      normalAddress: {}, //默认地址信息
      projectData: {}, //项目信息
      showTime: false,
      timeData: {},
    };
  },
  components: {},
  watch: {},
  methods: {
    // 获取订单详情
    async getOrderDetail(id) {
      let that = this;
      await getModelInfo("66002f4f5efd5153ff566ec3", id)
        .then(async (res) => {
          this.orderData = res.data;
          this.isReady = this.orderData.is_orders == 1 ? true : false;
          await Promise.all([
            that.getUserInfo(that.userInfo.id),
            that.getProjectInfo(res.data.current_project_Info),
            that.getNormalAddress(res.data.address_id),
          ]);
        })
        .catch((err) => {
          uni.showToast({
            title: err,
            icon: "none",
          });
        });
    },
    // 获取客户信息
    async getUserInfo(user_id) {
      let filterData = {
        currentPage: 1,
        pageSize: -1,
        filter: getSearchFilter({ user_id }, { method: "eq" }),
      };
      try {
        const { data, code } = await getModelList(
          "660247fe5efd5153ff56b807",
          filterData
        );
        if (code === 200) this.clientInfo = data?.list?.[0];
      } catch (error) {
        uni.showToast({
          title: error,
          icon: "none",
        });
      }
    },
    // 获取项目信息
    async getProjectInfo(id) {
      try {
        const { data, code } = await getModelInfo(
          "65b1d17c0921260197c48a76",
          id
        );
        if (code === 200) this.projectData = data;
      } catch (error) {
        console.log(error);
      }
    },
    // 获取默认地址信息
    async getNormalAddress(creatorUserId) {
      const { data } = await getModelInfo(
        "65c1d9085efd5153ff55e6f4",
        creatorUserId
      );
      this.normalAddress = data;
    },
  },
  onLoad(options) {
    this.currentOrderId = options.orderId;
    if (this.currentOrderId) this.getOrderDetail(options.orderId);
  },
};
</script>

<style lang="scss" scoped>
.show_time {
  width: 100%;
  height: 300rpx;
  display: grid;
  place-content: center;
  text-align: center;

  .time {
    @include flex;
    align-items: center;

    &__custom {
      margin-top: 4px;
      width: 22px;
      height: 22px;
      background-color: $u-primary;
      border-radius: 4px;
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      justify-content: center;
      align-items: center;

      &__item {
        color: #fff;
        font-size: 12px;
        text-align: center;
      }
    }

    &__doc {
      color: $u-primary;
      padding: 0px 4px;
    }

    &__item {
      color: #606266;
      font-size: 30px;
      margin-right: 4px;
    }
  }
}
</style>
